<template>
    <div class="login">
        <!-- 选择按钮 -->
        <div class="login-btn">
            <div class="btn-wrapper">
                <div class="item" :class="{'active':loginInfo.type==1}" @click="loginInfo.type=1">手机号码登录</div>
                <div class="item" :class="{'active':loginInfo.type==2}" @click="loginInfo.type=2">账号密码登录</div>
            </div>
        </div>
        <!-- 表单 -->
        <div class="login-info">
            <!-- 手机号验证码登录 -->
            <div class="login-box">
                <div class="user-wrapper">
                    <div class="item noborder">
                        <div class="text">手机号</div>
                        <div class="form">
                            <input type="text" placeholder="请输入手机号" v-model="loginInfo.tel"/>
                        </div>
                    </div>
                    <transition name="fade" mode="out-in">
                        <div class="item yzm" v-if="loginInfo.type==1">
                            <div class="text">验证码</div>
                            <div class="form">
                                <input type="text" placeholder="请输入短信验证码" v-model="loginInfo.code"/>
                            </div>
                            <div class="yzm-btn" @click="getCode">{{code}}</div>
                        </div>
                        <div class="item" v-if="loginInfo.type==2">
                            <div class="text">密码</div>
                            <div class="form">
                                <input type="text" placeholder="请输入登陆密码" v-model="loginInfo.pwd"/>
                            </div>
                        </div>
                    </transition>
                </div>
            </div>
        </div>
        <!-- 提示信息 -->
        <div class="note">未注册过的手机将自动创建手服网账户！</div>
        <!-- 提交按钮 -->
        <div class="search-btn" @click="gotoSubmit">
            <button-medium text="登录" :bg="bg" ref="btn"></button-medium>
        </div>
    </div>
</template>

<script>
import {toast} from '../../base/js/toast.js'
import ButtonMedium from '../parts/buttonMedium.vue'    //按钮
import {Trim, rnd} from '../../common/js/dom.js'                 //去除空格
import User from '../../common/js/user.js'                 //用户原型类
import {mapMutations, mapGetters} from 'vuex'
const codeText = "获取验证码"
const codeTime = 60
export default {
    data() {
        return {
            bg: '#e3e6e9',          //按钮背景色
            code: codeText,          //验证码文字
            yzm: '',                //用来验证的验证码
            loginInfo:{             //当前订单信息
                tel: '',            //手机号码
                code: '',           //验证码
                pwd: '',            //密码
                type: 1,            //登录方式，1：手机号验证码登录，2：手机号密码登录
            },   
        }
    },
    components: {ButtonMedium},
    computed: {
        // 获取vuex用户对象的电话
        ...mapGetters([
            'user'
        ])
    },
    mounted() {
        //如果全局vuex用户对象电话不为空，那么直接跳转到个人中心页面
        if(this.user.tel!=''){
            //页面跳转
            this.$router.push({path: '/hsqlogin/hsqcenter'})
        }
        // console.log(this.user.tel)
    },
    methods: {
        //点击模拟获取验证码
        getCode(){
            //如果没有恢复，就不允许点击
            if(this.code != codeText) return
            var second = codeTime
            var _this = this
            //清除之前的定时器
            if(window.timer){
                window.clearInterval(timer)
            }
            //创建定时器
            timer = window.setInterval(()=>{
                _this.code = `剩余 ${second} s`
                second--
                //当过了5s就发送验证码
                if(second == codeTime-3){
                    var fourCode = rnd()
                    toast(`验证码为${fourCode}`,2000)
                    //生成四位随机数
                    _this.loginInfo.code = fourCode
                    _this.yzm = fourCode
                }
                //如果时间小于0，清除定时器
                if(second < 0){
                    window.clearInterval(timer)
                    _this.code = codeText
                }
            },1000)
        },
        //点击登录
        gotoSubmit(){
            //手机号不能为空
            if(Trim(this.loginInfo.tel) == ''){
                toast('手机号不能为空!')
                return false
            }
            //手机号错误
            var reg_tel=/^1[3|4|5|7|8][0-9]{9}$/
            if(!reg_tel.test(Trim(this.loginInfo.tel))){
                toast('手机号格式不正确!')
                return false
            }
            if(this.loginInfo.type==1){
                //验证验证码
                if(this.loginInfo.code == ''){
                    toast('验证码不能为空!')
                    return false
                }
                if(this.loginInfo.code != this.yzm){
                    toast('验证码不正确!')
                    return false
                }
            }else if(this.loginInfo.type==2){
                //验证密码
                if(this.loginInfo.pwd == ''){
                    toast('密码不能为空!')
                    return false
                }
                if(this.loginInfo.pwd != this.user.pwd){
                    toast('密码不正确!')
                    return false
                }
            }
            //全局vuex存储用户电话
            this.setUserTel(this.loginInfo.tel)
            // console.log(this.user_tel)

            //把用户存储到本地(判断是否存在用户)
            var hs_user= localStorage.getItem('hs_user')
            hs_user = JSON.parse(hs_user)
            if(!hs_user || hs_user.tel != this.loginInfo.tel){
                hs_user = new User({ //用户对象
                    tel: this.loginInfo.tel,
                    name: '',
                    provice: '',
                    city: '',
                    area: '',
                    address: '',
                    alipay: '',
                    pwd: '',        //登录密码
                    avatar : `./src/common/image/default.png`        //头像
                })
                localStorage.setItem('hs_user',JSON.stringify(hs_user))
            }
            
            //页面跳转
            this.$router.push({path: '/hsqlogin/hsqcenter'})
        },
        //修改用户信息
        ...mapMutations({
            setUserTel: 'SET_USER_TEL' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
        })
    },
    watch:{
        //修改按钮颜色
        'loginInfo': {
            handler: function(curVal,oldVal){
                this.$refs.btn.setBgcolor('#e3e6e9')
                //手机号不能为空
                if(Trim(curVal.tel) == '') return 
                if(curVal.type==1){
                    //验证验证码
                    if(curVal.code == '') return
                }else if(curVal.type==2){
                    //验证密码
                    if(curVal.pwd == '') return
                }
                this.$refs.btn.setBgcolor('#fcdb00')
            },
            deep: true
        }
    }
}
</script>
<style  lang="less" scoped>
    @import "../../common/less/variable.less";
    .login{
        position:fixed;
        top:0;
        bottom:0;
        left:0;
        width:100%;
        z-index:22;
        background:@color-gray-bg;
        .login-btn{
            padding:20px 40px 10px;
            box-sizing:border-box;
            background:#fff;
            .btn-wrapper{
                height:30px;
                line-height:30px;
                width:100%;
                border-radius:30px;
                border:1px solid @color-yellow;
                display:flex;
                .item{
                    flex:1;
                    border-radius:30px;
                    font-size:14px;
                    color:@color-alert-title;
                    text-align:center;
                    &.active{
                        background:@color-yellow;
                    }
                }
            }
        }
        .login-info{
            width:100%;
            box-sizing:border-box;
            .login-box{
                width:100%;
                background:#fff;
                padding:0;
                box-sizing: border-box;
                border-radius:@border-alert-radius;
                padding:0 10px;
                .item{
                    display:flex;
                    height:50px;
                    line-height:50px;
                    border-top:1px solid @color-alert-line;
                    &.noborder{border:none}
                    &.yzm{
                        position:relative;
                        .yzm-btn{
                            position:absolute;
                            top:10px;
                            right:0;
                            height:30px;
                            line-height:30px;
                            font-size:14px;
                            background:@color-gray-btn;
                            color:@color-alert-gray;
                            padding:0 7px;
                        }
                    }
                    .text{
                        flex:0 0 50px;
                        font-size:14px;
                        color:@color-alert-title;
                        line-height: 50px;
                    }
                    .form{
                        flex:1;
                        margin-left:10px;
                        font-size:14px;
                        color:@color-alert-title;
                        line-height:50px;
                        input{
                            font-size:14px;
                            height:50px;
                            line-height:50px;
                            width: 100%;
                            text-indent:5px;
                        }
                        select{
                            border:none;
                            font-size:14px;
                            height:50px;
                            line-height:50px;
                            width: 100%;
                            
                        }
                    }
                }
            }
        }
        .note{
            text-align:left;
            font-size:12px;
            color:@color-alert-con;
            margin:20px 0;
            line-height:14px;
            padding:0 10px;
        }
    }
</style>
